<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="百度地图, 高德地图, 天地图, 路线追踪, 经纬度导入导出, 地图标注, 路线规划, 路线长度统计, 地图工具, 轨迹记录, 位置管理, 轨迹分析, 地图可视化, 路线管理, 电子地图, 轨迹导出, 轨迹导入">
    <meta name="description" content="本工具支持百度地图、高德地图、天地图多种底图切换，提供路线追踪、经纬度批量导入导出、地图标注、路线长度与点数统计等功能，适用于路线规划、轨迹记录与分析，操作简便，适合出行、运动、物流等多种场景。">
    <title>多地图路线追踪工具</title>
    <link rel="icon" href="assets/images/favicon.ico">
    <!-- 引入 Tailwind CSS -->
    <script src="assets/css/tailwindcss.min.js"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 百度地图API -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=4r1lDLQoUqi9MdQBYe9WlUCs8eaYT5bb"></script>
    <!-- 高德地图API -->
    <script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "b7a5eb5c7eff650c16544054485a2488",
    };
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=3aa17259b115103db2cbe5ec24a03cce&plugin=AMap.PlaceSearch,AMap.GeometryUtil,AMap.ToolBar,AMap.Scale"></script>
    <!-- 天地图API -->
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=c2a12fdc9c5ceebf0c9bd3bde6f44172"></script>

    <!-- 配置 Tailwind CSS -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        accent: '#722ED1',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .map-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .map-switch-btn {
                @apply px-3 py-1 text-sm rounded-md border border-gray-300 hover:bg-gray-100 transition-all-300;
            }
            .map-switch-btn.active {
                @apply bg-primary text-white border-primary hover:bg-primary/90;
            }
            .point-input {
                @apply w-full px-2 py-1 border border-gray-300 rounded-md text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 focus:border-primary;
            }
            input[type=number]::-webkit-outer-spin-button,
            input[type=number]::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
            input[type=number] {
                -moz-appearance: textfield;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-neutral-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-map-marker text-primary text-2xl"></i>
                <h1 id="mapTitle" class="text-xl font-bold text-primary">百度地图路线追踪</h1>
            </div>
            <div class="flex items-center space-x-2">
                <button id="baiduMapBtn" data-maptype="baidu" class="map-switch-btn active">百度地图</button>
                <button id="gaodeMapBtn" data-maptype="gaode" class="map-switch-btn">高德地图</button>
                <button id="tiandituMapBtn" data-maptype="tianditu" class="map-switch-btn">天地图</button>
                <button id="helpBtn" class="text-gray-600 hover:text-primary transition-all-300 ml-2">
                    <i class="fa fa-question-circle mr-1"></i>帮助
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- 左侧工具栏 -->
            <div class="lg:w-1/3 bg-white rounded-lg shadow-md p-4 flex flex-col space-y-4">
                <div>
                    <h2 class="text-lg font-semibold mb-2 text-primary">搜索地点</h2>
                    <div class="relative">
                        <input
                            type="text"
                            id="searchInput"
                            placeholder="输入地名搜索..."
                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all-300"
                        >
                        <button
                            id="searchBtn"
                            class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-primary transition-all-300"
                        >
                            <i class="fa fa-search"></i>
                        </button>
                        <div id="searchResults" class="mt-1 max-h-60 overflow-y-auto hidden bg-white border border-gray-200 rounded-md absolute z-20 w-full shadow-lg"></div>
                    </div>
                </div>

                <div>
                    <h2 class="text-lg font-semibold mb-2 text-primary">路线管理</h2>
                    <div class="grid grid-cols-2 gap-2">
                        <button
                            id="addPointBtn"
                            class="py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 flex items-center justify-center"
                        >
                            <i class="fa fa-plus-circle mr-1"></i> 添加当前点
                        </button>
                        <button
                            id="clearPointsBtn"
                            class="py-2 bg-red-200 text-gray-700 rounded-md hover:bg-red-300 transition-all-300 flex items-center justify-center"
                        >
                            <i class="fa fa-trash mr-1"></i> 清除所有点
                        </button>
                        <button
                            id="importBtn"
                            class="py-2 bg-secondary text-white rounded-md hover:bg-secondary/90 transition-all-300 flex items-center justify-center"
                        >
                            <i class="fa fa-upload mr-1"></i> 导入经纬度
                        </button>
                        <button
                            id="exportBtn"
                            class="py-2 bg-accent text-white rounded-md hover:bg-accent/90 transition-all-300 flex items-center justify-center"
                        >
                            <i class="fa fa-download mr-1"></i> 导出经纬度
                        </button>
                    </div>
                    <input type="file" id="importFileInput" class="hidden" accept=".csv">
                </div>
                <div class="flex-grow flex flex-col overflow-hidden">
                    <!-- 点位列表标题及按钮 -->
                    <div class="flex items-center justify-between mb-2">
                        <span class="font-bold text-lg text-blue-700">点位列表</span>
                        <div class="flex items-center space-x-2">
                            <button id="addPointManuallyBtn" title="添加点位" class="p-1 rounded hover:bg-blue-100 text-blue-600 border border-blue-200">
                                <i class="fa fa-plus"></i>
                            </button>
                            <button id="sortPointsBtn" title="排序" class="p-1 rounded hover:bg-blue-100 text-blue-600 border border-blue-200">
                                <i class="fa fa-sort"></i>
                            </button>
                        </div>
                    </div>
                    <div id="pointListContainer" class="space-y-2 overflow-y-auto border border-gray-200 p-2 rounded-md bg-gray-50 max-h-[calc(100vh-550px)] min-h-[240px]">
                        <p class="text-sm text-gray-500 text-center py-4" id="noPointsMessage">暂无点位，请在地图上点击添加。</p>
                    </div>
                </div>
            </div>

            <!-- 右侧地图区域 -->
            <div class="lg:w-2/3 rounded-lg overflow-hidden map-shadow">
                <div id="mapContainer" class="w-full h-[56vh] bg-gray-100"></div>
                <div class="bg-white p-3 border-t border-gray-200 flex justify-between items-center">
                    <div class="flex items-center text-sm">
                        <div class="flex items-center mr-4">
                            <div class="w-3 h-3 rounded-full mr-1" style="background: #d9250e"></div>
                            <span>起点</span>
                        </div>
                        <div class="flex items-center mr-4">
                            <div class="w-3 h-3 rounded-full mr-1" style="background: #1296db"></div>
                            <span>中间点</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full mr-1" style="background: #1afa29"></div>
                            <span>终点</span>
                        </div>
                    </div>
                    <div class="text-sm text-gray-500">
                        <span id="currentCoord">坐标: --, --</span>
                    </div>
                </div>
                <div class="mt-auto">
                    <div class="bg-neutral p-3 rounded-md">
                        <h4 class="text-neutral-dark font-semibold text-base mb-2">路线信息</h4>
                        <div class="space-y-1 text-sm">
                            <div class="grid grid-cols-[max-content_1fr] items-baseline gap-x-2">
                                <span class="text-gray-600 text-right">长度:</span>
                                <span id="totalLength" class="font-semibold text-blue-600">0 千米</span>
                            </div>
                            <div class="grid grid-cols-[max-content_1fr] items-baseline gap-x-2">
                                <span class="text-gray-600 text-right">点数:</span>
                                <span id="pointCount" class="font-semibold text-blue-600">0</span>
                            </div>
                            <div class="flex items-center space-x-2 mt-2">
                                <label for="speedInput" class="text-gray-600">时速(千米/小时):</label>
                                <input id="speedInput" type="number" min="1" max="500" value="60" class="w-16 px-1 py-0.5 border rounded text-xs" />
                                <span class="text-gray-600">总耗时:</span>
                                <span id="totalTime" class="font-semibold text-blue-600">0小时0分</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 帮助模态框 -->
    <div id="helpModal" style="z-index:99999 !important" class="fixed inset-0 bg-black/50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg max-w-md w-full max-h-[90vh] overflow-y-auto mx-4">
            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-semibold text-primary">使用帮助</h3>
                <button id="closeHelpBtn" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-4 z-9999">
                <h4 class="font-medium mb-1 text-gray-800">1. 搜索地点</h4>
                <p class="text-gray-600 mb-3">在左侧搜索框输入地名，点击搜索按钮或按回车键。点击搜索结果会自动在地图上定位该地点（地图会移动），并填充为"当前点"。</p>
                <h4 class="font-medium mb-1 text-gray-800">2. 添加点位</h4>
                <p class="text-gray-600 mb-3">点击地图上任意位置添加点位，或在搜索并定位后点击"添加当前点"按钮。添加点位后，地图不会自动缩放或移动以适应所有点。</p>
                <h4 class="font-medium mb-1 text-gray-800">3. 编辑点位</h4>
                <p class="text-gray-600 mb-3">在左侧点位列表中修改点的名称、经纬度，或在地图上拖动标记点。地图不会因此自动缩放或移动。</p>
                <h4 class="font-medium mb-1 text-gray-800">4. 删除点位</h4>
                <p class="text-gray-600 mb-3">点击点位列表中每个点右侧的 <i class="fa fa-trash-o text-red-500"></i> 图标，即可删除该点。地图不会因此自动缩放或移动。</p>
                <h4 class="font-medium mb-1 text-gray-800">5. 查看路线</h4>
                <p class="text-gray-600 mb-3">添加两个或以上点位后，系统自动连线显示路线，并计算总长度。</p>
                <h4 class="font-medium mb-1 text-gray-800">6. 导出数据</h4>
                <p class="text-gray-600 mb-3">点击"导出经纬度"按钮，可将所有点位的名称和经纬度信息保存为CSV文件。</p>
                <h4 class="font-medium mb-1 text-gray-800">7. 导入数据</h4>
                <p class="text-gray-600 mb-3">点击"导入经纬度"按钮，选择一个CSV文件。文件格式应为：<br><code>名称,经度,纬度</code> (有表头或无表头均可，名称可选)<br>或 <code>经度,纬度</code> (有表头或无表头均可)<br>例如：<br><code>北京,116.404,39.915</code><br><code>上海,121.473,31.230</code><br>或<br><code>116.404,39.915</code><br><code>121.473,31.230</code><br>导入的点会追加到现有列表中。</p>
                <h4 class="font-medium mb-1 text-gray-800">8. 清除点位</h4>
                <p class="text-gray-600 mb-3">点击"清除所有点"按钮，可删除所有已添加的点位和路线。地图不会因此自动缩放或移动。</p>
                <h4 class="font-medium mb-1 text-gray-800">9. 拖动点位</h4>
                <p class="text-gray-600 mb-3">直接拖动地图上的标记点来调整位置，点位列表中的经纬度会自动更新。地图不会因此自动缩放或移动。</p>
                <h4 class="font-medium mb-1 text-gray-800">10. 切换地图</h4>
                <p class="text-gray-600 mb-3">点击顶部地图名称按钮，切换不同的地图服务商，已添加的点会自动迁移，并且地图会自动调整视野以显示所有点。注意：由于不同地图商使用不同的坐标系（如天地图CGCS2000/WGS-84，高德地图GCJ-02，百度地图BD-09），切换地图后点位在不同地图上可能存在视觉上的偏移，这是正常现象。</p>
            </div>
            <div class="p-4 border-t border-gray-200">
                <button id="confirmHelpBtn" class="w-full py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                    我知道了
                </button>
            </div>
            
        </div>
    </div>
    <!-- 手动添加点位模态框 -->
    <div id="manualAddPointModal" style="z-index:99999 !important"  class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center hidden">
    <div class="bg-white rounded shadow-lg p-6 w-80">
        <div class="font-bold mb-2 text-lg">手动添加点位</div>
        <div class="mb-2">
        <label class="block text-sm mb-1">名称：</label>
        <input id="manualNameInput" type="text" class="w-full border px-2 py-1 rounded" placeholder="请输入名称">
        </div>
        <div class="mb-2">
        <label class="block text-sm mb-1">经度：</label>
        <input id="manualLngInput" type="number" step="any" class="w-full border px-2 py-1 rounded" placeholder="请输入经度，例：116.404000">
        </div>
        <div class="mb-2">
        <label class="block text-sm mb-1">纬度：</label>
        <input id="manualLatInput" type="number" step="any" class="w-full border px-2 py-1 rounded" placeholder="请输入纬度，例：39.915000">
        </div>
        <div class="flex justify-end space-x-2 mt-4">
        <button id="manualAddPointCancelBtn" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300">取消</button>
        <button id="manualAddPointConfirmBtn" class="px-3 py-1 rounded bg-blue-600 text-white hover:bg-blue-700">确认</button>
        </div>
    </div>
    </div>
    <script src="assets/js/main.js"></script>
    
    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
    <script>LA.init({id:"3MbjPABdk1o7vlwe",ck:"3MbjPABdk1o7vlwe"})</script>
</body>
</html>